<script setup lang="ts">
import { Handle, type NodeProps, Position } from '@vue-flow/core'
import { NodeToolbar } from '@vue-flow/node-toolbar'

const props = defineProps<NodeProps>()
/**
 * 隐藏掉props，然后查看传递了什么属性：
 */
// const attrs = useAttrs()
// console.log('自定义节点的attrs：',attrs)

const handleOperation = (type: string) => {
  props.data.toolbarVisible = false
}
</script>

<template>
  <div class="vue-flow__node-default">
    <!-- :is-visible="data.toolbarVisible" :position="data.toolbarPosition"-->
    <!-- :is-visible="data.toolbarVisible"-->
    <NodeToolbar :position="data.toolbarPosition" :offset="-20">
      <a-button @click="handleOperation('delete')">delete</a-button>
      <a-button>copy</a-button>
      <a-button>expand</a-button>
    </NodeToolbar>

    <div>{{ data.label }}</div>
    <!--<div>123</div>-->

    <Handle type="target" :position="Position.Left" />
    <Handle type="source" :position="Position.Right" />
  </div>
</template>

<style scoped></style>
